<script setup>
import * as echarts from 'echarts/core';
import { TooltipComponent, VisualMapComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { Bar3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';
import { onMounted, ref, onUnmounted } from 'vue';

echarts.use([
  TooltipComponent,
  VisualMapComponent,
  Grid3DComponent,
  Bar3DChart,
  CanvasRenderer
]);

const chartRef = ref(null);
let myChart = null;

// 禽蛋检测相关的数据
// 数据格式: [检测日期(周几), 检测时间段, 检测数量]
var days = ['周六', '周五', '周四', '周三', '周二', '周一', '周日'];
var timePeriods = ['上午0点', '上午1点', '上午2点', '上午3点', '上午4点', '上午5点', '上午6点',
    '上午7点', '上午8点', '上午9点', '上午10点', '上午11点',
    '下午12点', '下午1点', '下午2点', '下午3点', '下午4点', '下午5点',
    '下午6点', '下午7点', '下午8点', '下午9点', '下午10点', '下午11点'];
    
// 禽蛋检测数量数据 [检测日期索引, 检测时间段索引, 检测数量]
var data = [
  [0, 0, 120], [0, 1, 85], [0, 2, 65], [0, 3, 45], [0, 4, 60], [0, 5, 95], [0, 6, 150], 
  [0, 7, 210], [0, 8, 260], [0, 9, 240], [0, 10, 220], [0, 11, 200], [0, 12, 180], 
  [0, 13, 190], [0, 14, 210], [0, 15, 230], [0, 16, 250], [0, 17, 280], [0, 18, 260], 
  [0, 19, 220], [0, 20, 180], [0, 21, 160], [0, 22, 140], [0, 23, 130],
  
  [1, 0, 110], [1, 1, 80], [1, 2, 60], [1, 3, 40], [1, 4, 55], [1, 5, 90], [1, 6, 145], 
  [1, 7, 200], [1, 8, 250], [1, 9, 230], [1, 10, 210], [1, 11, 190], [1, 12, 170], 
  [1, 13, 180], [1, 14, 200], [1, 15, 220], [1, 16, 240], [1, 17, 270], [1, 18, 250], 
  [1, 19, 210], [1, 20, 170], [1, 21, 150], [1, 22, 130], [1, 23, 120],
  
  [2, 0, 100], [2, 1, 75], [2, 2, 55], [2, 3, 35], [2, 4, 50], [2, 5, 85], [2, 6, 140], 
  [2, 7, 190], [2, 8, 240], [2, 9, 220], [2, 10, 200], [2, 11, 180], [2, 12, 160], 
  [2, 13, 170], [2, 14, 190], [2, 15, 210], [2, 16, 230], [2, 17, 260], [2, 18, 240], 
  [2, 19, 200], [2, 20, 160], [2, 21, 140], [2, 22, 120], [2, 23, 110],
  
  [3, 0, 115], [3, 1, 82], [3, 2, 62], [3, 3, 42], [3, 4, 57], [3, 5, 92], [3, 6, 147], 
  [3, 7, 195], [3, 8, 245], [3, 9, 225], [3, 10, 205], [3, 11, 185], [3, 12, 165], 
  [3, 13, 175], [3, 14, 195], [3, 15, 215], [3, 16, 235], [3, 17, 265], [3, 18, 245], 
  [3, 19, 205], [3, 20, 165], [3, 21, 145], [3, 22, 125], [3, 23, 115],
  
  [4, 0, 105], [4, 1, 77], [4, 2, 57], [4, 3, 37], [4, 4, 52], [4, 5, 87], [4, 6, 142], 
  [4, 7, 192], [4, 8, 242], [4, 9, 222], [4, 10, 202], [4, 11, 182], [4, 12, 162], 
  [4, 13, 172], [4, 14, 192], [4, 15, 212], [4, 16, 232], [4, 17, 262], [4, 18, 242], 
  [4, 19, 202], [4, 20, 162], [4, 21, 142], [4, 22, 122], [4, 23, 112],
  
  [5, 0, 95], [5, 1, 70], [5, 2, 50], [5, 3, 30], [5, 4, 45], [5, 5, 80], [5, 6, 135], 
  [5, 7, 185], [5, 8, 235], [5, 9, 215], [5, 10, 195], [5, 11, 175], [5, 12, 155], 
  [5, 13, 165], [5, 14, 185], [5, 15, 205], [5, 16, 225], [5, 17, 255], [5, 18, 235], 
  [5, 19, 195], [5, 20, 155], [5, 21, 135], [5, 22, 115], [5, 23, 105],
  
  [6, 0, 125], [6, 1, 90], [6, 2, 70], [6, 3, 50], [6, 4, 65], [6, 5, 100], [6, 6, 155], 
  [6, 7, 215], [6, 8, 265], [6, 9, 245], [6, 10, 225], [6, 11, 205], [6, 12, 185], 
  [6, 13, 195], [6, 14, 215], [6, 15, 235], [6, 16, 255], [6, 17, 285], [6, 18, 265], 
  [6, 19, 225], [6, 20, 185], [6, 21, 165], [6, 22, 145], [6, 23, 135]
];

onMounted(() => {
  myChart = echarts.init(chartRef.value);
  
  var option = {
    tooltip: {},
    visualMap: {
      max: 300,
      inRange: {
        color: [
          '#313695',
          '#4575b4',
          '#74add1',
          '#abd9e9',
          '#e0f3f8',
          '#ffffbf',
          '#fee090',
          '#fdae61',
          '#f46d43',
          '#d73027',
          '#a50026'
        ]
      },
      calculable: true,
      // 调整视觉映射组件的位置
      orient: 'horizontal',
      left: 'center',
      bottom: '10%'
    },
    xAxis3D: {
      type: 'category',
      data: timePeriods,
      axisLabel: {
        color: '#ffffff'
      }
    },
    yAxis3D: {
      type: 'category',
      data: days,
      axisLabel: {
        color: '#ffffff'
      }
    },
    zAxis3D: {
      type: 'value',
      axisLabel: {
        color: '#ffffff'
      }
    },
    grid3D: {
      // 增加盒子尺寸以适应更多的数据点
      boxWidth: 200,
      boxDepth: 80,
      boxHeight: 80,
      // 调整布局边距，确保图表完整显示
      top: '5%',
      left: '5%',
      right: '5%',
      bottom: '15%',
      viewControl: {
        // 启用自动旋转
        autoRotate: true,
        // 设置自动旋转速度
        autoRotateSpeed: 2,
        // 设置旋转方向和角度
        autoRotateDirection: 'cw', // cw: 顺时针, ccw: 逆时针
        // 设置视角参数
        alpha: 30,   // 垂直角度
        beta: 45,    // 水平角度
        // 设置缩放参数
        distance: 250,  // 相机距离，数值越大离得越远
        zoomSensitivity: 0.5  // 缩放灵敏度
      },
      light: {
        main: {
          intensity: 1.2
        },
        ambient: {
          intensity: 0.3
        }
      }
    },
    series: [
      {
        type: 'bar3D',
        data: data.map(function (item) {
          return {
            value: [item[1], item[0], item[2]]
          };
        }),
        shading: 'color',
        label: {
          show: false,
          fontSize: 16,
          borderWidth: 1
        },
        itemStyle: {
          opacity: 0.8
        },
        emphasis: {
          label: {
            fontSize: 20,
            color: '#900'
          },
          itemStyle: {
            color: '#900'
          }
        }
      }
    ]
  };

  myChart.setOption(option);
  
  // 添加窗口大小改变的监听，确保图表自适应
  window.addEventListener('resize', () => {
    if (myChart) {
      myChart.resize();
    }
  });
});

onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
  }
  window.removeEventListener('resize', () => {
    if (myChart) {
      myChart.resize();
    }
  });
});
</script>

<template>
  <div class="chart-container">
    <div class="chart-title">周检测量分布</div>
    <div ref="chartRef" class="chart-content"></div>
  </div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.chart-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
  font-family: Inter, sans-serif;
}

.chart-content {
  width: 100%;
  height: calc(100% - 30px);
}
</style> 